﻿@model EasyLift.TMS.Web.Helpers.PaginatedList<EasyLift.TMS.Web.Models.MissionDetail>

@{
    ViewBag.Title = "Inbound";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@*    <div id="ActionLinkButtons">
        @Html.ActionLink("Create New " , "Create") 
    </div>*@

    <script type="text/javascript">

        //{ name: 'DepartureDate', index: 'DepartureDate', width: 150, align: 'left', search: false, editable: true, editrules: { required: false }, edittype: 'text', editoptions: { defaultValue: 'mm/dd/yyyy'} },

        jQuery(document).ready(function () {
            $("#list").jqGrid({
                url: '/MissionDetail/GridInboundData',
                width: 720,
                height: 250,
                datatype: 'json',
                mtype: 'GET',
                colNames: ['ID', 'TMR', 'Mission Date', 'Outbound Date', 'Outbound Remarks', 'Vehicle #', 'Plate#', 'Truck Inbound Date', 'Truck Inbound Remarks', 'Outbound Odometer', 'Inbound Odometer', 'Driver Civil ID', 'Driver Name', 'Driver Inbound Date', 'Driver Inbound Remarks', 'TrailerNumber'],
                colModel: [
                        { name: 'MissionDetailID', index: 'MissionDetailID', width: 20, align: 'left', hidden: false, search: true, searchoptions: { sopt: ['cn'] }, editable: false, editoptions: { readonly: true, size: 10} },
                        { name: 'TMR', index: 'TMR', width: 140, align: 'left', search: true, searchoptions: { sopt: ['eq'] }, editable: true, editoptions: { readonly: true }, formoptions: { rowpos: 7} },
                        { name: 'MissionDate', index: 'MissionDate', width: 150, align: 'left', search: false, editable: true, editoptions: { readonly: true }, formoptions: { rowpos: 8} },
                        { name: 'DepartureDate', index: 'DepartureDate', width: 150, align: 'left', search: false },
                        { name: 'DepartureRemarks', index: 'DepartureRemarks', width: 140, align: 'left', search: true, searchoptions: { sopt: ['cn']} },
                        { name: 'VehicleNumber', index: 'VehicleNumber', width: 140, align: 'left', hidden: false, search: true, searchoptions: { sopt: ['cn'] }, editable: true, editoptions: { readonly: true }, formoptions: { rowpos: 9} },
                        { name: 'LicensePlateNumber', index: 'LicensePlateNumber', width: 240, align: 'left', search: false },
                        { name: 'VehicleReturnDate', index: 'VehicleReturnDate', width: 110,
                            editable: true,
                            editoptions: { size: 20,
                                dataInit: function (el) {
                                    $(el).datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', numberOfMonths: 1, minDate: -7, maxDate: 7, hourGrid: 4, minuteGrid: 10 });
                                }
                            },
                            formoptions: { rowpos: 1, elmprefix: ""},
                            editrules: { required: false }
                        },
                        { name: 'VehicleReturnRemarks', index: 'VehicleReturnRemarks', width: 140, align: 'left', search: true, searchoptions: { sopt: ['cn'] }, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "20" }, formoptions: { rowpos: 4, elmprefix: ""} },
                        { name: 'VehicleOutboundMilage', index: 'VehicleOutboundMilage', width: 240, align: "right", search: false, editable: true, editoptions: { readonly: true, size: 20 }, formoptions: { rowpos: 2, elmprefix: ""} },
                        { name: 'VehicleInboundMilage', index: 'VehicleInboundMilage', width: 240, align: "right", search: false, editable: true, editoptions: { size: 20 }, formoptions: { rowpos: 3, elmprefix: "" }, editrules: { required: true} },
                        { name: 'DriverCivilID', index: 'DriverCivilID', width: 140, align: 'left', search: true, searchoptions: { sopt: ['cn'] }, editable: true, editoptions: { readonly: true }, formoptions: { rowpos: 10} },
                        { name: 'DriverName', index: 'DriverName', width: 140, align: 'left', search: false, editable: true, editoptions: { readonly: true }, formoptions: { rowpos: 11} },
                        { name: 'DriverReturnDate', index: 'DriverReturnDate', width: 80,
                            editable: true,
                            editoptions: { size: 20,
                                dataInit: function (el) {
                                    $(el).datetimepicker({dateFormat: 'yy-mm-dd', timeFormat:'hh:mm', numberOfMonths: 1, minDate: -7, maxDate: 7, hourGrid: 4, minuteGrid: 10 });
                                }
                            },
                            formoptions: { rowpos: 5, elmprefix: ""},
                            editrules: { required: false }
                        },
                        { name: 'DriverReturnRemarks', index: 'DriverReturnRemarks', width: 140, align: 'left', search: true, searchoptions: { sopt: ['cn'] }, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "20" }, formoptions: { rowpos: 6, elmprefix: ""} },
                        { name: 'TrailerNumber', index: 'TrailerNumber', width: 140, align: 'left', search: false}],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 50],
                shrinkToFit: false,
                sortname: 'MissionDetailID',
                sortorder: "DESC",
                viewrecoreds: false,
                rownumbers: true,
                hidegrid: false,
                imgpath: ''
            }).jqGrid('navGrid', '#pager',
            { edit: true, add: false, del: false, refresh: true, search: true },
            { url: "/MissionDetail/Edit?type=inbound",
                recreateForm: true,
                beforeShowForm: function (form) {
                    //$("#VehicleReturnDate", form).attr('readonly', true);
                    $("#VehicleReturnDate", form).datetimepicker('setDate', (new Date()));
                    //$("#DriverReturnDate", form).attr('readonly', true);
                    $("#DriverReturnDate", form).datetimepicker('setDate', (new Date()));
                }
            },
            {},
            {});
        });

        function EditLinkFormatter(cellvalue, options, rowObject) {
            return '<a href=Edit/' + rowObject[0] + ' >' + cellvalue + '</a>'
        }

    </script>
    <div class="newline">
        <div class="sameline-wrapper">
            <div id="ActionLinkButtons">
                    <a href="/Reports/MissionDetailsReport.aspx?q=Inbound" target="_blank"> Print / Export </a>
            </div>
        </div>
    </div>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>